<template>
	
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<form class="loginFrom" @submit="login"  >
				<view class="username from-item">
					<input type="text"  name="username" placeholder="请输入用户名"  />
				</view>
			
				<view class="password from-item">
					<input type="password"  name="password"  placeholder="请输入密码"/>
				</view>
				<view class="subAndReset">
					<button form-type="submit" type="primary" >登录</button>
					<navigator class="regist" url="../register/register">注册</navigator>
				</view>
			
			</form>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				title: '方糖云'
			}
		},
		onBackPress() {
			//点击返回
			uni.showModal({
				title: '确认退出',
				success() {
					uni.quit();
				}
			})
		},

		methods: {
			login(e){
				var username = e.target.value.username;		
				var password = e.target.value.password;
				uni.request({
					url: this.serverUrl+'/user/login',
					method: 'POST',
					data: {
						username: username,
						password: password
					},
					header: {
						     // 使用这个会将data参数自动转化为params
					        'content-type': 'application/x-www-form-urlencoded',
							'token': this.token
					},
					success: res => {
						var code = res.data.code;
						if(code=='200'){
							uni.showToast({
								title: '登录成功',
								duration: 500
							});
						//储存user信息到全局变量的里面，my界面的时候可以做展示.		
							getApp().globalData.token = res.data.data.token;
							getApp().globalData.user = {
								roleName: res.data.data.roleName,
								username: res.data.data.username,
								password: res.data.data.password,
								nickname: res.data.data.nickname,
								email: res.data.data.email
							};
							//定时器清理token 5分钟
							setTimeout('clearToken',10024,null);
	
				
							//tabBar特有的页面跳转
							uni.switchTab({
								url: '../index/index'
							});
							
						}else{
							uni.showModal({
								title: '账号或者密码错误',
								showCancel: false,
								
							})
						}
					},
					fail: () => {
						uni.showModal({
							content: '请求服务器失败,请联系管理员',
							showCancel: false
						})
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}
.from-item{
	height: 50upx;
	width: 500upx;
	margin-top: 20upx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20upx;
	color: #000000;
	background-color: #FFFFFF;
	text-align: center;
	border-bottom: 1upx solid #000000 ;
}
.regist{
	color: #005FC5;
	float: right;
}
</style>
